<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <link rel="stylesheet" type="text/css" href="/Public/app/css/main.css" />
    <link rel="stylesheet" href="/Public/app/css/shake.css" />
    <link rel="stylesheet" href="/Public/libs/layer/need/layer.css">
    <script src="/Public/libs/layer/layer.js"></script>
    <script src="/Public/libs/jquery-1.9.1.min.js"></script>
    <script src="/Public/libs/vconsole.min.js"></script>
    <script src="/Public/libs/store.legacy.min.js"></script>

    <title>摇一摇</title>
    <script type="text/javascript">
        function playAudio() {
            if (window.HTMLAudioElement) {
                var oAudio = document.getElementById('audio');
                oAudio.play();
            }
        }

        window.onload = function () {
            playAudio();
            //     //create a new instance of shake.js.
            //     var myShakeEvent = new Shake({
            //         threshold: 5
            //     });

            //     // start listening to device motion
            //     myShakeEvent.start();

            //     // register a shake event
            //     window.addEventListener('shake', shakeEventDidOccur, false);

            //     //shake event callback
            //     function shakeEventDidOccur() {

            //         //put your own code here etc.
            //         $('.shakeimg').removeClass('shake');
            //         setTimeout(function () {
            //             $('.shakeimg').addClass('shake')
            //         }, 0)
            //         // playAudio();
            //     }
        };
    </script>
    <script type="text/javascript" src="/Public/libs/shake.js"></script>
    <!-- <script src="/Public/libs/vconsole.min.js"></script> -->

</head>

<body>
    <div class="audio" style="width:0; height:0px; overflow:hidden; text-indent:-999px;">
        <audio id='audio' src='/Public/app/sound/5018.mp3' autoplay style="width:0; height:0px;"></audio>
    </div>
    <div class="content">
        <div class="indexbg">
            <img class="indexBg" src="/Public/app/images/shake/indexbg.png" />
            <img class="shakeimg" src="/Public/app/images/shake/shake.png" />
            <img class="shakeimg begin-shake-btn" src="/Public/app/images/shake/play.png" />

            <img class="cp" src="/Public/app/images/shake/cp.png" />
        </div>
        <div class="nav">

            <ul class="clearfix">
                <!-- <li onclick="document.getElementById('hdsm').style.display='block';document.getElementById('hdsmContent').style.display='block';"> -->
                <li>
                    <a href="#">
                        <!-- <img src="/Public/app/images/shake/hdsm.png" /> -->
                        <div class="max-shark-num-box">
                            <p class="max-shark-num max-num">0</p>
                            <img src="/Public/app/images/shake/num-bg.png" style="width:100%;" />
                        </div>
                        <p>历史最高</p>
                    </a>
                </li>

                <!-- <li onclick="document.getElementById('hdsm').style.display='block';document.getElementById('fx').style.display='block';"> -->
                <li>
                    <a href="#">
                        <!-- <img src="/Public/app/images/shake/hdsm.png" /> -->
                        <div class="max-shark-num-box">
                            <p class="max-shark-num count-down">30</p>
                            <img src="/Public/app/images/shake/num-bg.png" style="width:100%;" />
                        </div>
                        <p>倒计时</p>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <!-- <img src="/Public/app/images/shake/hdsm.png" /> -->
                        <div class="max-shark-num-box">
                            <p class="max-shark-num current-num">0</p>
                            <img src="/Public/app/images/shake/num-bg.png" style="width:100%;" />
                        </div>
                        <p>当前次数</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="power">初阳科技</div>
</body>


<!-- 业务逻辑 -->
<script>
    $(function () {
        // var vConsole = new VConsole();
        if (!store.get('cj__openid')) {
            layer.closeAll();

            layer.open({
                content: '未签到',
                btn: '请签到',
                shadeClose: false,
                yes: function () {
                    window.location.replace(
                        '/index.php');

                }
            })
            return false;
        }


        var num = 0;
        var active_flag = false;
        var dataObj = new Date();
        var activeId = null;
        // 活动时间区间
        var time_interval = 30;


        var befotime = dataObj.getTime();
        // 摇一摇开始
        $('.begin-shake-btn').on('touch click', function () {

            layer.open({
                shadeClose: false,
                type: 2,
                content: '加载中'
            });


            $.ajax({
                type: 'POST',
                url: '/index.php/Active/getsharkflag',
                data: {
                    openid: store.get('cj__openid')
                },
                success: function (data) {
                    // console.log(data);
                    if (data['return_code'] == 1) {
                        if (data['return_body']['activity_flag'] == 1 && activeId != data[
                                'return_body']['id']) {

                            // alert('活动开始啦...');
                            // 隐藏开始按钮
                            $('.begin-shake-btn').hide();
                            //删除所有layer层
                            layer.closeAll();

                            countDown(time_interval);
                            active_flag = true;
                            dataObj = new Date();
                            befotime = dataObj.getTime();
                            activeId = data['return_body']['id'];
                        } else {
                            layer.closeAll();
                            layer.open({
                                content: '活动暂未开启或已结束',
                                time: 2,
                                skin: 'msg'
                            });
                            active_flag = false;
                        }
                    } else {
                        layer.closeAll();

                        layer.open({
                            content: '活动暂未开启或已结束',
                            time: 2,
                            skin: 'msg'
                        });
                        active_flag = false;
                    }

                },
                error: function (err) {
                    console.log(err);
                    //删除所有layer层
                    layer.closeAll();
                    //信息框
                    layer.open({
                        content: '服务器出了点问题',
                        btn: '关闭'
                    });
                }
            })

        });

        // 倒计时处理
        function countDown(times) {
            var time = times;
            var timer = setInterval(function () {
                time--;
                $('.count-down').text(time);
                if (time == 0) {
                    submitShakeNum(num);
                    // 显示开始按钮
                    $('.begin-shake-btn').show();
                    active_flag = false;
                    num = 0;
                    clearInterval(timer);
                }
            }, 1000);
        }

        function submitShakeNum(num) {
            $.ajax({
                type: 'POST',
                url: '/index.php/Active/savesharknum',
                data: {
                    shakeNum: num,
                    openid: store.get('cj__openid'),
                    activeId: activeId
                },
                success: function (data) {
                    console.log(data);
                    if (data['return_code'] == 1) {
                        $('.begin-shake-btn').removeAttr('disabled');
                        $('.count-down').text(time_interval);
                        $('.max-num').text(data['return_body']['shark_num']);

                        //信息框
                        layer.open({
                            content: '本次总共摇了' + num + '次',
                            btn: '好'
                        });
                    } else {

                        //删除所有layer层
                        layer.closeAll();
                        //信息框
                        layer.open({
                            content: data['return_msg'],
                            btn: '关闭'
                        });
                    }
                },
                error: function (err) {
                    //删除所有layer层
                    layer.closeAll();
                    //信息框
                    layer.open({
                        content: '服务器出了点问题',
                        btn: '关闭'
                    });

                }
            })
        }


        // 摇一摇
        var myShakeEvent = new Shake({
            threshold: 12,
            timeout: 30
        });
        // start listening to device motion
        myShakeEvent.start();
        // register a shake event
        window.addEventListener('shake', shakeEventDidOccur, false);
        //shake event callback
        function shakeEventDidOccur() {
            //put your own code here etc.
            $('.shakeimg').removeClass('shake');
            setTimeout(function () {
                $('.shakeimg').addClass('shake')
            }, 0)

            if (active_flag == true) {
                var newDate = new Date();
                var nowTime = newDate.getTime();
                if (Number(newDate) - Number(befotime) < time_interval * 1000) {
                    num++;
                    $('.current-num').text(num);
                }
            }
        }
    })
</script>



</html>